<script setup lang="ts">
import { cloneDeep } from 'lodash-es'
import { createDefu } from 'defu'
import settingsDefault from '@/settings'
import type { Settings } from '#/global'
import apiUser from '@/api/modules/user'
import eventBus from '@/utils/eventBus'
import useSettingsStore from '@/store/modules/settings'

defineOptions({
  name: 'Preferences',
})

const settingsStore = useSettingsStore()

const isShow = ref(false)
/**
 * 提供用户可配置的选项
 * 不需要配置的选项，可以在这里删除或注释掉，页面上会自动隐藏
 * 需注意，boolean 类型的选项，会先判断系统是否开启了该功能，如果系统没有开启，那即便在这里允许配置，页面上也不会显示
 */
const preferences = ref<Settings.all>({
  app: {
    colorScheme: settingsDefault.app.colorScheme,
    theme: settingsDefault.app.theme,
    enableProgress: settingsDefault.app.enableProgress,
  },
  menu: {
    menuMode: settingsDefault.menu.menuMode,
    menuFillStyle: settingsDefault.menu.menuFillStyle,
    menuActiveStyle: settingsDefault.menu.menuActiveStyle,
    switchMainMenuAndPageJump: settingsDefault.menu.switchMainMenuAndPageJump,
    subMenuOnlyOneHide: settingsDefault.menu.subMenuOnlyOneHide,
    subMenuUniqueOpened: settingsDefault.menu.subMenuUniqueOpened,
    subMenuCollapse: settingsDefault.menu.subMenuCollapse,
    enableSubMenuCollapseButton: settingsDefault.menu.enableSubMenuCollapseButton,
  },
  layout: {
    widthMode: settingsDefault.layout.widthMode,
  },
  mainPage: {
    enableTransition: settingsDefault.mainPage.enableTransition,
    transitionMode: settingsDefault.mainPage.transitionMode,
  },
  topbar: {
    mode: settingsDefault.topbar.mode,
    switchTabbarAndToolbar: settingsDefault.topbar.switchTabbarAndToolbar,
  },
  tabbar: {
    enable: settingsDefault.tabbar.enable,
    style: settingsDefault.tabbar.style,
    enableIcon: settingsDefault.tabbar.enableIcon,
    mergeTabsBy: settingsDefault.tabbar.mergeTabsBy,
    enableMemory: settingsDefault.tabbar.enableMemory,
  },
  breadcrumb: {
    enable: settingsDefault.breadcrumb.enable,
    style: settingsDefault.breadcrumb.style,
    enableMainMenu: settingsDefault.breadcrumb.enableMainMenu,
  },
})

watch(() => preferences.value, (val) => {
  settingsStore.updateSettings(cloneDeep(val))
  // 更新用户偏好设置
  apiUser.preferencesEdit(JSON.stringify(val))
}, {
  deep: true,
})

/**
 * 此处没有使用 lodash 的 defaultsDeep 函数，而是基于 defu 库自定义了一个函数，只合并 preferences 中有的属性，而不是全部合并
 * 这样做的目的是为了避免用户历史遗留的配置项始终存在
 */
const customDefaultsDeep = createDefu((obj, key) => {
  if (obj[key] === undefined) {
    delete obj[key]
    return true
  }
})

onMounted(() => {
  eventBus.on('global-preferences-toggle', () => {
    isShow.value = !isShow.value
  })
  // 获取用户偏好设置
  apiUser.preferences().then((res) => {
    preferences.value = customDefaultsDeep(JSON.parse(res.data.preferences || '{}'), preferences.value)
  })
})
</script>

<template>
  <div>
    <el-drawer v-model="isShow" title="偏好设置" direction="rtl" :size="360">
      <el-alert title="这是一个可以实现用户个性化配置的功能，需要开发者接入后端接口，用于保存用户的配置。" type="error" :closable="false" />
      <el-divider v-if="preferences.app?.hasOwnProperty('colorScheme') || preferences.app?.hasOwnProperty('theme')">
        颜色主题风格
      </el-divider>
      <div v-if="preferences.app?.hasOwnProperty('colorScheme')" class="color-scheme">
        <div class="switch" :class="preferences.app.colorScheme" @click="preferences.app?.hasOwnProperty('colorScheme') && (preferences.app.colorScheme = preferences.app.colorScheme === 'dark' ? 'light' : 'dark')">
          <svg-icon :name="preferences.app.colorScheme === 'light' ? 'ri:sun-line' : 'ri:moon-line'" />
        </div>
      </div>
      <div v-if="preferences.app?.hasOwnProperty('theme')" class="theme">
        <div data-theme="default" :class="{ active: preferences.app.theme === 'default' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'default')">
          <div class="content" />
        </div>
        <div data-theme="sys_green" :class="{ active: preferences.app.theme === 'sys_green' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'sys_green')">
          <div class="content" />
        </div>
        <div data-theme="sys_orange" :class="{ active: preferences.app.theme === 'sys_orange' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'sys_orange')">
          <div class="content" />
        </div>
        <div data-theme="sys_pink" :class="{ active: preferences.app.theme === 'sys_pink' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'sys_pink')">
          <div class="content" />
        </div>
        <div data-theme="sys_grey" :class="{ active: preferences.app.theme === 'sys_grey' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'sys_grey')">
          <div class="content" />
        </div>
        <div data-theme="sys_yellow" :class="{ active: preferences.app.theme === 'sys_yellow' }" @click="preferences.app?.hasOwnProperty('theme') && (preferences.app.theme = 'sys_yellow')">
          <div class="content" />
        </div>
      </div>
      <el-divider v-if="settingsStore.mode === 'pc' && preferences.menu?.hasOwnProperty('menuMode')">
        导航栏模式
      </el-divider>
      <div v-if="settingsStore.mode === 'pc' && preferences.menu?.hasOwnProperty('menuMode')" class="menu-mode">
        <el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
          <div class="mode mode-side" :class="{ active: preferences.menu.menuMode === 'side' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'side')">
            <div class="mode-container" />
            <svg-icon name="ri:checkbox-circle-fill" />
          </div>
        </el-tooltip>
        <el-tooltip content="顶部模式" placement="top" :show-after="500">
          <div class="mode mode-head" :class="{ active: preferences.menu.menuMode === 'head' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'head')">
            <div class="mode-container" />
            <svg-icon name="ri:checkbox-circle-fill" />
          </div>
        </el-tooltip>
        <el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
          <div class="mode mode-single" :class="{ active: preferences.menu.menuMode === 'single' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'single')">
            <div class="mode-container" />
            <svg-icon name="ri:checkbox-circle-fill" />
          </div>
        </el-tooltip>
        <el-tooltip content="侧边栏精简模式" placement="top" :show-after="500">
          <div class="mode mode-only-side" :class="{ active: preferences.menu.menuMode === 'only-side' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'only-side')">
            <div class="mode-container" />
            <svg-icon name="ri:checkbox-circle-fill" />
          </div>
        </el-tooltip>
        <el-tooltip content="顶部精简模式" placement="top" :show-after="500">
          <div class="mode mode-only-head" :class="{ active: preferences.menu.menuMode === 'only-head' }" @click="preferences.menu?.hasOwnProperty('menuMode') && (preferences.menu.menuMode = 'only-head')">
            <div class="mode-container" />
            <svg-icon name="ri:checkbox-circle-fill" />
          </div>
        </el-tooltip>
      </div>
      <el-divider v-if="preferences.menu?.hasOwnProperty('menuFillStyle')">
        导航栏填充风格
      </el-divider>
      <div v-if="preferences.menu?.hasOwnProperty('menuFillStyle')" class="menu-style">
        <el-radio-group v-model="preferences.menu.menuFillStyle" size="default">
          <el-tooltip content="默认" placement="top" :show-after="500">
            <el-radio-button label="">
              <svg-icon name="jam:stop-sign" :size="18" />
            </el-radio-button>
          </el-tooltip>
          <el-tooltip content="圆角" placement="top" :show-after="500">
            <el-radio-button label="radius">
              <svg-icon name="mdi:border-radius" :size="18" />
            </el-radio-button>
          </el-tooltip>
        </el-radio-group>
      </div>
      <el-divider v-if="preferences.menu?.hasOwnProperty('menuActiveStyle')">
        导航栏激活风格
      </el-divider>
      <div v-if="preferences.menu?.hasOwnProperty('menuActiveStyle')" class="menu-style">
        <el-radio-group v-model="preferences.menu.menuActiveStyle" size="default" :disabled="['single'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)">
          <el-tooltip content="默认" placement="top" :show-after="500">
            <el-radio-button label="">
              <svg-icon name="jam:stop-sign" :size="18" />
            </el-radio-button>
          </el-tooltip>
          <el-tooltip content="箭头" placement="top" :show-after="500">
            <el-radio-button label="arrow">
              <svg-icon name="ep:caret-left" :rotate="['head', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode) ? 90 : 0" :size="18" />
            </el-radio-button>
          </el-tooltip>
          <el-tooltip content="线条" placement="top" :show-after="500">
            <el-radio-button label="line">
              <svg-icon name="ep:semi-select" :rotate="['side', 'only-side'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode) ? 90 : 0" :size="18" />
            </el-radio-button>
          </el-tooltip>
          <el-tooltip content="点" placement="top" :show-after="500">
            <el-radio-button label="dot">
              <svg-icon name="icon-park-outline:dot" :size="18" />
            </el-radio-button>
          </el-tooltip>
        </el-radio-group>
      </div>
      <el-divider v-if="settingsStore.mode === 'pc' && preferences.layout?.hasOwnProperty('widthMode')">
        页宽模式
      </el-divider>
      <div v-if="settingsStore.mode === 'pc' && preferences.layout?.hasOwnProperty('widthMode')" class="app-width-mode">
        <el-tooltip content="自适应" placement="top" :show-after="500">
          <div class="mode mode-adaption" :class="{ active: preferences.layout.widthMode === 'adaption' }" @click="preferences.layout?.hasOwnProperty('widthMode') && (preferences.layout.widthMode = 'adaption')">
            <svg-icon name="ep:back" class="left" />
            <svg-icon name="ep:right" class="right" />
            <svg-icon name="ri:checkbox-circle-fill" class="active-icon" />
          </div>
        </el-tooltip>
        <el-tooltip content="自适应（有最小宽度）" placement="top" :show-after="500">
          <div class="mode mode-adaption-min-width" :class="{ active: preferences.layout.widthMode === 'adaption-min-width' }" @click="preferences.layout?.hasOwnProperty('widthMode') && (preferences.layout.widthMode = 'adaption-min-width')">
            <svg-icon name="ep:back" class="left" />
            <svg-icon name="ep:right" class="right" />
            <svg-icon name="ri:checkbox-circle-fill" class="active-icon" />
          </div>
        </el-tooltip>
        <el-tooltip content="定宽居中" placement="top" :show-after="500">
          <div class="mode mode-center" :class="{ active: preferences.layout.widthMode === 'center' }" @click="preferences.layout?.widthMode && (preferences.layout.widthMode = 'center')">
            <svg-icon name="ri:checkbox-circle-fill" class="active-icon" />
          </div>
        </el-tooltip>
        <el-tooltip content="定宽居中（有最大宽度）" placement="top" :show-after="500">
          <div class="mode mode-center-max-width" :class="{ active: preferences.layout.widthMode === 'center-max-width' }" @click="preferences.layout?.widthMode && (preferences.layout.widthMode = 'center-max-width')">
            <svg-icon name="ep:back" class="left" />
            <svg-icon name="ep:right" class="right" />
            <svg-icon name="ri:checkbox-circle-fill" class="active-icon" />
          </div>
        </el-tooltip>
      </div>
      <el-divider v-if="settingsDefault.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('enableTransition')">
        页面切换动画
      </el-divider>
      <div v-if="settingsDefault.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('enableTransition')" class="enable-transition">
        <el-switch v-model="preferences.mainPage.enableTransition" />
      </div>
      <div v-if="settingsDefault.mainPage.enableTransition && preferences.mainPage?.hasOwnProperty('transitionMode')" class="transition-mode">
        <el-tooltip content="淡入淡出" placement="top" :show-after="500">
          <div class="mode mode-fade" :class="{ active: preferences.mainPage.transitionMode === 'fade' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'fade')" />
        </el-tooltip>
        <el-tooltip content="向左滑动" placement="top" :show-after="500">
          <div class="mode mode-slide-left" :class="{ active: preferences.mainPage.transitionMode === 'slide-left' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-left')" />
        </el-tooltip>
        <el-tooltip content="向右滑动" placement="top" :show-after="500">
          <div class="mode mode-slide-right" :class="{ active: preferences.mainPage.transitionMode === 'slide-right' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-right')" />
        </el-tooltip>
        <el-tooltip content="向上滑动" placement="top" :show-after="500">
          <div class="mode mode-slide-top" :class="{ active: preferences.mainPage.transitionMode === 'slide-top' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-top')" />
        </el-tooltip>
        <el-tooltip content="向下滑动" placement="top" :show-after="500">
          <div class="mode mode-slide-bottom" :class="{ active: preferences.mainPage.transitionMode === 'slide-bottom' }" @click="preferences.mainPage?.hasOwnProperty('transitionMode') && (preferences.mainPage.transitionMode = 'slide-bottom')" />
        </el-tooltip>
      </div>
      <el-divider v-if="preferences.menu?.hasOwnProperty('switchMainMenuAndPageJump') || preferences.menu?.hasOwnProperty('subMenuOnlyOneHide') || preferences.menu?.hasOwnProperty('subMenuUniqueOpened') || preferences.menu?.hasOwnProperty('subMenuCollapse') || preferences.menu?.hasOwnProperty('enableSubMenuCollapseButton')">
        导航栏
      </el-divider>
      <div v-if="preferences.menu?.hasOwnProperty('switchMainMenuAndPageJump')" class="setting-item">
        <div class="label">
          主导航切换跳转
          <el-tooltip content="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.menu.switchMainMenuAndPageJump" size="default" :disabled="['single', 'only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <div v-if="preferences.menu?.hasOwnProperty('subMenuOnlyOneHide')" class="setting-item">
        <div class="label">
          次导航自动隐藏
          <el-tooltip content="开启该功能后，切换主导航时，如果次导航里只有一个导航时，则自动隐藏" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.menu.subMenuOnlyOneHide" size="default" :disabled="['single', 'only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <div v-if="preferences.menu?.hasOwnProperty('subMenuUniqueOpened')" class="setting-item">
        <div class="label">
          次导航保持展开一个
          <el-tooltip content="开启该功能后，次导航只保持单个菜单的展开" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.menu.subMenuUniqueOpened" size="default" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <div v-if="preferences.menu?.hasOwnProperty('subMenuCollapse')" class="setting-item">
        <div class="label">
          次导航是否折叠
        </div>
        <el-switch v-model="preferences.menu.subMenuCollapse" size="default" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <div v-if="settingsStore.mode === 'pc' && settingsDefault.menu.enableSubMenuCollapseButton && preferences.menu?.hasOwnProperty('enableSubMenuCollapseButton')" class="setting-item">
        <div class="label">
          显示次导航折叠按钮
        </div>
        <el-switch v-model="preferences.menu.enableSubMenuCollapseButton" size="default" :disabled="['only-side', 'only-head'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <el-divider v-if="preferences.topbar?.hasOwnProperty('mode') || preferences.topbar?.hasOwnProperty('switchTabbarAndToolbar')">
        顶栏
      </el-divider>
      <div v-if="preferences.topbar?.hasOwnProperty('mode')" class="setting-item">
        <div class="label">
          模式
        </div>
        <el-radio-group v-model="preferences.topbar.mode" size="small">
          <el-radio-button label="static">
            静止
          </el-radio-button>
          <el-radio-button label="fixed">
            固定
          </el-radio-button>
          <el-radio-button label="sticky">
            粘性
          </el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="preferences.topbar?.hasOwnProperty('switchTabbarAndToolbar')" class="setting-item">
        <div class="label">
          展示切换
          <el-tooltip content="切换标签栏和工具栏的展示顺序" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.topbar.switchTabbarAndToolbar" size="default" :disabled="!preferences.tabbar?.enable" />
      </div>
      <el-divider v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('enable') || preferences.tabbar?.hasOwnProperty('style') || preferences.tabbar?.hasOwnProperty('enableIcon') || preferences.tabbar?.hasOwnProperty('mergeTabsBy')">
        标签栏
      </el-divider>
      <div v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('enable')" class="setting-item">
        <div class="label">
          是否启用
        </div>
        <el-switch v-model="preferences.tabbar.enable" size="default" />
      </div>
      <div v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('style')" class="setting-item">
        <div class="label">
          风格
        </div>
        <el-radio-group v-model="preferences.tabbar.style" size="small" :disabled="!(preferences.tabbar?.enable ?? settingsDefault.tabbar.enable)">
          <el-radio-button label="fashion">
            时尚
          </el-radio-button>
          <el-radio-button label="card">
            卡片
          </el-radio-button>
          <el-radio-button label="square">
            方块
          </el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('enableIcon')" class="setting-item">
        <div class="label">
          是否显示图标
        </div>
        <el-switch v-model="preferences.tabbar.enableIcon" size="default" :disabled="!(preferences.tabbar?.enable ?? settingsDefault.tabbar.enable)" />
      </div>
      <div v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('mergeTabsBy')" class="setting-item">
        <div class="label">
          标签页合并规则
        </div>
        <el-select v-model="preferences.tabbar.mergeTabsBy" size="small" :disabled="!(preferences.tabbar?.enable ?? settingsDefault.tabbar.enable)" style="width: 150px;">
          <el-option label="不合并" value="" />
          <el-option label="根据 activeMenu 合并" value="activeMenu" />
          <el-option label="根据路由名称合并" value="routeName" />
        </el-select>
      </div>
      <div v-if="settingsDefault.tabbar.enable && preferences.tabbar?.hasOwnProperty('enableMemory')" class="setting-item">
        <div class="label">
          是否启用记忆功能
          <el-tooltip content="开启该功能后，非固定和非常驻的标签页将在本次会话窗口中始终存在，刷新浏览器或重新登录时不会丢失" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.tabbar.enableMemory" size="default" :disabled="!(preferences.tabbar?.enable ?? settingsDefault.tabbar.enable)" />
      </div>
      <el-divider v-if="settingsStore.mode === 'pc' && settingsDefault.breadcrumb.enable && (preferences.breadcrumb?.hasOwnProperty('enable') || preferences.breadcrumb?.hasOwnProperty('style') || preferences.breadcrumb?.hasOwnProperty('enableMainMenu'))">
        面包屑导航
      </el-divider>
      <div v-if="settingsStore.mode === 'pc' && settingsDefault.breadcrumb.enable && preferences.breadcrumb?.hasOwnProperty('enable')" class="setting-item">
        <div class="label">
          是否启用
        </div>
        <el-switch v-model="preferences.breadcrumb.enable" size="default" />
      </div>
      <div v-if="settingsStore.mode === 'pc' && settingsDefault.breadcrumb.enable && preferences.breadcrumb?.hasOwnProperty('style')" class="setting-item">
        <div class="label">
          风格
        </div>
        <el-radio-group v-model="preferences.breadcrumb.style" size="small" :disabled="!(preferences.breadcrumb?.enable ?? settingsDefault.breadcrumb.enable)">
          <el-radio-button label="">
            默认
          </el-radio-button>
          <el-radio-button label="modern">
            现代
          </el-radio-button>
        </el-radio-group>
      </div>
      <div v-if="settingsStore.mode === 'pc' && settingsDefault.breadcrumb.enable && settingsDefault.breadcrumb.enableMainMenu && preferences.breadcrumb?.hasOwnProperty('enableMainMenu')" class="setting-item">
        <div class="label">
          是否显示主导航
        </div>
        <el-switch v-model="preferences.breadcrumb.enableMainMenu" size="default" :disabled="['single'].includes(preferences.menu?.menuMode ?? settingsDefault.menu.menuMode)" />
      </div>
      <el-divider v-if="preferences.app?.hasOwnProperty('enableProgress')">
        其它
      </el-divider>
      <div v-if="settingsDefault.app.enableProgress && preferences.app?.hasOwnProperty('enableProgress')" class="setting-item">
        <div class="label">
          载入进度条
          <el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
            <svg-icon name="ri:question-line" />
          </el-tooltip>
        </div>
        <el-switch v-model="preferences.app.enableProgress" size="default" />
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: initial;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--el-border-color);
  transition: var(--el-transition-border);
}

:deep(.el-divider) {
  margin: 36px 0 24px;
  transition: var(--el-transition-border);

  .el-divider__text {
    transition: background-color 0.3s, var(--el-transition-color);
  }
}

.menu-mode {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;

  .mode {
    position: relative;
    width: 80px;
    height: 55px;
    margin: 10px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--g-app-bg);
    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
    transition: 0.2s;

    &:hover {
      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
    }

    &.active {
      box-shadow: 0 0 0 2px var(--el-color-primary);
    }

    &::before,
    &::after,
    .mode-container {
      pointer-events: none;
      position: absolute;
      border-radius: 3px;
    }

    .mode-container::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: var(--g-theme-color);
      opacity: 0.2;
    }

    &-side {
      &::before {
        content: "";
        top: 5px;
        left: 5px;
        bottom: 5px;
        width: 10px;
        background-color: var(--g-theme-color);
      }

      &::after {
        content: "";
        top: 5px;
        left: 20px;
        bottom: 5px;
        width: 15px;
        background-color: var(--g-theme-color);
        opacity: 0.5;
      }

      .mode-container {
        inset: 5px 5px 5px 40px;
        border: 1px dashed var(--g-theme-color);
      }
    }

    &-head {
      &::before {
        content: "";
        top: 5px;
        left: 5px;
        right: 5px;
        height: 10px;
        background-color: var(--g-theme-color);
      }

      &::after {
        content: "";
        top: 20px;
        left: 5px;
        bottom: 5px;
        width: 15px;
        background-color: var(--g-theme-color);
        opacity: 0.5;
      }

      .mode-container {
        inset: 20px 5px 5px 25px;
        border: 1px dashed var(--g-theme-color);
      }
    }

    &-single {
      &::before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        bottom: 5px;
        width: 15px;
        background-color: var(--g-theme-color);
        opacity: 0.5;
      }

      .mode-container {
        inset: 5px 5px 5px 25px;
        border: 1px dashed var(--g-theme-color);
      }
    }

    &-only-side {
      &::before {
        content: "";
        top: 5px;
        left: 5px;
        bottom: 5px;
        width: 10px;
        background-color: var(--g-theme-color);
      }

      .mode-container {
        inset: 5px 5px 5px 20px;
        border: 1px dashed var(--g-theme-color);
      }
    }

    &-only-head {
      &::before {
        content: "";
        top: 5px;
        left: 5px;
        right: 5px;
        height: 10px;
        background-color: var(--g-theme-color);
      }

      .mode-container {
        inset: 20px 5px 5px;
        border: 1px dashed var(--g-theme-color);
      }
    }

    .icon {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: none;
    }

    &.active .icon {
      display: block;
      color: var(--el-color-primary);
    }
  }
}

.app-width-mode {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;

  .mode {
    position: relative;
    width: 65px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    color: var(--el-text-color-primary);
    background-color: var(--el-fill-color-darker);
    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
    transition: background-color 0.3s, var(--el-transition-color), var(--el-transition-box-shadow);

    &:hover {
      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
    }

    &.active {
      box-shadow: 0 0 0 2px var(--el-color-primary);
    }

    &-adaption {
      .left,
      .right {
        position: absolute;
        top: 50%;
        margin-top: -8px;
      }

      .left {
        left: 5px;
      }

      .right {
        right: 5px;
      }
    }

    &-adaption-min-width {
      background: var(--el-bg-color);

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -15px;
        height: 100%;
        width: 30px;
        background-color: var(--el-fill-color-darker);
        transition: background-color 0.3s;
      }

      .left,
      .right {
        position: absolute;
        top: 50%;
        margin-top: -8px;
      }

      .left {
        left: 0;
      }

      .right {
        right: 0;
      }
    }

    &-center {
      background: var(--el-bg-color);

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -20px;
        height: 100%;
        width: 40px;
        background-color: var(--el-fill-color-darker);
        transition: background-color 0.3s;
      }
    }

    &-center-max-width {
      background: var(--el-bg-color);

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -20px;
        height: 100%;
        width: 40px;
        background-color: var(--el-fill-color-darker);
        transition: background-color 0.3s;
      }

      .left,
      .right {
        position: absolute;
        top: 50%;
        margin-top: -8px;
      }

      .left {
        left: 13px;
      }

      .right {
        right: 13px;
      }
    }

    .active-icon {
      position: absolute;
      right: 2px;
      bottom: 2px;
      display: none;
    }

    &.active .active-icon {
      display: block;
      color: var(--el-color-primary);
    }
  }
}

.menu-style {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;
}

.enable-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;
}

.transition-mode {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;

  .mode {
    position: relative;
    width: 45px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--el-bg-color);
    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
    transition: background-color 0.3s, var(--el-transition-color), var(--el-transition-box-shadow);

    &:hover {
      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
    }

    &.active {
      box-shadow: 0 0 0 2px var(--el-color-primary);
    }

    &::after {
      content: "";
      position: absolute;
      left: 15%;
      top: 15%;
      height: 70%;
      width: 70%;
      border-radius: 4px;
      background-color: var(--el-fill-color-darker);
      transition: all 0.3s;
    }

    &.mode-fade {
      &::after {
        animation: transition-mode-fade-after 1.5s infinite;
      }

      @keyframes transition-mode-fade-after {
        0% {
          opacity: 1;
        }

        30%,
        35% {
          opacity: 0;
        }

        65% {
          opacity: 1;
        }
      }
    }

    &.mode-slide-left {
      &::after {
        animation: transition-mode-slide-left 1.5s infinite;
      }

      @keyframes transition-mode-slide-left {
        0% {
          opacity: 1;
        }

        30% {
          opacity: 0;
          transform: translate(-30%, 0);
        }

        35% {
          opacity: 0;
          transform: translate(30%, 0);
        }

        65% {
          opacity: 1;
        }
      }
    }

    &.mode-slide-right {
      &::after {
        animation: transition-mode-slide-right 1.5s infinite;
      }

      @keyframes transition-mode-slide-right {
        0% {
          opacity: 1;
        }

        30% {
          opacity: 0;
          transform: translate(30%, 0);
        }

        35% {
          opacity: 0;
          transform: translate(-30%, 0);
        }

        100% {
          opacity: 1;
        }
      }
    }

    &.mode-slide-top {
      &::after {
        animation: transition-mode-slide-top 1.5s infinite;
      }

      @keyframes transition-mode-slide-top {
        0% {
          opacity: 1;
        }

        30% {
          opacity: 0;
          transform: translate(0, -30%);
        }

        35% {
          opacity: 0;
          transform: translate(0, 30%);
        }

        100% {
          opacity: 1;
        }
      }
    }

    &.mode-slide-bottom {
      &::after {
        animation: transition-mode-slide-bottom 1.5s infinite;
      }

      @keyframes transition-mode-slide-bottom {
        0% {
          opacity: 1;
        }

        30% {
          opacity: 0;
          transform: translate(0, 30%);
        }

        35% {
          opacity: 0;
          transform: translate(0, -30%);
        }

        100% {
          opacity: 1;
        }
      }
    }
  }
}

.color-scheme {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 10px;

  $width: 50px;

  .switch {
    width: $width;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
    background-color: var(--el-fill-color-darker);
    transition: background-color 0.3s;

    &.dark {
      .icon {
        transform: translateX(calc($width - 30px));
      }
    }

    .icon {
      margin: 3px;
      padding: 5px;
      font-size: 24px;
      border-radius: 50%;
      background-color: var(--el-fill-color-lighter);
      transition: transform 0.3s, background-color 0.3s;
    }
  }
}

.theme {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 10px;

  [data-theme] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 50px;
    margin: 10px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 5px 1px var(--el-border-color-lighter);
    transition: 0.2s;

    &:hover {
      box-shadow: 0 0 5px 1px var(--el-border-color-darker);
    }

    &.active {
      box-shadow: 0 0 0 2px var(--el-color-primary);

      .content {
        transform: rotate(0);
      }
    }

    .content {
      width: 30px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--g-theme-color);
      transform: rotate(-45deg);
      transition: var(--el-transition-md-fade), background-color 0.3s;
    }
  }
}

.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s;

  &:hover {
    background: var(--el-fill-color);
  }

  .label {
    font-size: 14px;
    color: var(--el-text-color-regular);
    display: flex;
    align-items: center;

    .icon {
      margin-left: 4px;
      font-size: 17px;
      color: var(--el-color-warning);
      cursor: help;
    }
  }

  .el-switch {
    height: auto;
  }

  .el-input {
    width: 150px;
  }
}
</style>
